<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html	xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="template/commonTemplate.xhtml">
	
	<ui:define name="pageMetaData">
	<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="../css/style.css"/>
		<link rel="stylesheet" media="all" href="../css/table.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->		
				
		<!-- JS -->
		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/tabs.js"></script>
		<script src="../js/css3-mediaqueries.js"></script>
		<script src="../js/jquery.columnizer.min.js"></script>
		
		<!-- Isotope -->
		<script src="../js/jquery.isotope.min.js"></script>
		
		<!-- Lof slider -->
		<script src="../js/jquery.easing.js"></script>
		<script src="../js/lof-slider.js"></script>
		<link rel="stylesheet" href="../css/lof-slider.css" media="all"  /> 
		<!-- ENDS slider -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="../css/jquery.tweet.css" media="all"  /> 
		<script src="../js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../css/superfish.css" /> 
		<script  src="../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="../js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- JCarousel -->
		<script type="text/javascript" src="../js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" media="screen" href="../css/carousel.css" /> 
		<!-- ENDS JCarousel -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'/>

		<!-- modernizr -->
		<script src="../js/modernizr.js"/>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../css/skin.css"/>
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../css/lessframework.css"/>
		
		<!-- flexslider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../js/jquery.flexslider.js"></script>
	</ui:define>
	
  	<ui:define name="styles">
  	
  	</ui:define>
  	
  	<ui:define name="title">Bustle</ui:define>
  	
  	<ui:define name="content" id="content">
		<div id="main">
			<h:form id="search">
				<div class="wrapper cf">
			
			 <!-- Tabs -->
					<h2 class="heading">Bienvenue <h:outputLabel value="#{monCompteMBean.firstName}"/></h2>
					<br/>
					<ul class="tabs">
						<li><a href="#"><span>Mon compte</span></a></li>
						<li><a href="#"><span>Mes commandes</span></a></li>
					</ul>
	
					<div class="panes">
						<div>
						<!-- ONGLET MON COMPTE -->
							<h:form>
    	        			 <h:messages />
    	        			 <h:panelGroup rendered="true">
	        					 <h:panelGroup rendered="#{monCompteMBean.displayUpdate}">
	        						<p>Informations personnelles</p>
	        						<p>
	        							Nom : <h:inputText value="#{monCompteMBean.firstName}"/> 
	        						</p>
	        						<p>
	        							Prénom : <h:inputText value="#{monCompteMBean.lastName}"/> 
	        						</p>
	        						<p>
	        							Date de naissance : <h:inputText value="#{monCompteMBean.birthday}">
	        													<f:convertDateTime pattern="dd/MM/yyyy"/>
	        												</h:inputText> 
	        						</p>
	        						<p>
	        							Email : <h:inputText value="#{monCompteMBean.email}"/> 
	        						</p>
	        						<p>Adresse</p>
	        						<p>
	        							Rue : <h:inputText  value="#{monCompteMBean.name_street}"/> 
	        						</p>
	        						<p>
	        							Code postal : <h:inputText value="#{monCompteMBean.postcode}"/> 
	        						</p>
	        						<p>
	        							Ville : <h:inputText value="#{monCompteMBean.city}"/> 
	        						</p>
	        						<h:commandButton action="#{monCompteMBean.save}" value="Sauvegarder les modifications"/>
	        					</h:panelGroup>
<!-- 	        				</h:form> -->
<!-- 	        				<h:form> -->
	        					<h:panelGroup rendered="#{monCompteMBean.displayView}">
	        						<p>Informations personnelles</p>
	        						<p>
	        							Nom : <h:outputLabel value="#{monCompteMBean.firstName}"/> 
	        						</p>
	        						<p>
	        							Prénom : <h:outputLabel value="#{monCompteMBean.lastName}"/> 
	        						</p>
	        						<p>
	        							Date de naissance : <h:outputLabel value="#{monCompteMBean.birthday}">
	        													<f:convertDateTime pattern="dd/MM/yyyy"/>
	        												</h:outputLabel> 
	        						</p>
	        						<p>
	        							Email : <h:outputLabel value="#{monCompteMBean.email}"/> 
	        						</p>
	        						<p>Adresse</p>
	        						<p>
	        							Rue : <h:outputLabel  value="#{monCompteMBean.name_street}"/> 
	        						</p>
	        						<p>
	        							Code postal : <h:outputLabel value="#{monCompteMBean.postcode}"/> 
	        						</p>
	        						<p>
	        							Ville : <h:outputLabel value="#{monCompteMBean.city}"/> 
	        						</p>
                      <h:commandButton action="#{monCompteMBean.logout}" value="Logout"/>
	        					</h:panelGroup>
	        					</h:panelGroup>
	        				</h:form>
						</div>	
							
						<div>
							<!-- ONGLET MES COMMANDES -->
							<h:dataTable value="#{orderMB.orders}" var="o" headerClass="tableHeader" rowClasses="tableContenu" cellspacing="5">
								<h:column>
						        	<f:facet name="header"><f:verbatim>N° Commande</f:verbatim></f:facet>
						        	<h:outputText value="#{o.idOrder}" />
						     	</h:column>
						     	<h:column>
						        	<f:facet name="header"><f:verbatim>Date</f:verbatim></f:facet>
						        	<h:outputText value="#{o.creationDate}" />
						     	</h:column>
						     	<h:column>
						        	<f:facet name="header"><f:verbatim>Total (en &euro;)</f:verbatim></f:facet>
						        	<h:outputText value="#{o.totalPrice}" />
						     	</h:column>
						     	<h:column>
						        	<f:facet name="header"><f:verbatim>Statut</f:verbatim></f:facet>
						        	<h:outputText value="#{o.orderStatus}" />
						     	</h:column>
						     	<h:column>
						        	<f:facet name="header"><f:verbatim>Détails</f:verbatim></f:facet>
						        	<h:commandLink action="#{orderMB.getDetails}" value="Détails de la commande">
						        		<f:param name="orderId" value="#{o.idOrder}"/>
						        	</h:commandLink>
						     	</h:column>
							</h:dataTable>
			    		</div>
						</div>
					</div>
					<!-- ENDS TABS -->
			</h:form>
		</div>
  	</ui:define>
</ui:composition>
</html>